<template>
    <div>
        <Modal v-model="isShow" :title="strTitle" :mask-closable="false" class-name="vertical-center-modal" width="400">
            <div id="_dingdingQRDiv">
                <iframe :src="src" frameBorder="0" allowTransparency="true" scrolling="no" width="365px" height="300px"></iframe>
            </div>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
import Vue from 'vue';
export default {
    name: "ddqr",
    props: {
        strTitle: {
            type: String,
            required: false,
            default: '钉钉扫码'
        },
        propUrl: {
            type: String,
            required: false,
            default: 'snsAuthorize'
        }

    },
    data() {
        return {
            isShow: false,
            src:'',
        };
    },
    computed: {
    },
    watch: {
    },
    methods: {
        showDDQRModel() {
            this.isShow = true;
            this.showQR();
        },
        showQR() {
            // 创建构造器
            // var qrIframe = Vue.extend({
            //     props: ['src'],
            //     template: '<iframe :src="src" frameBorder = "0" allowTransparency = "true" scrolling = "no" width="365px" height="300px"></iframe>',
            // })
            // let gotoUrl = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoajirmwomg2bp5fvrb&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://www.baidu.com"

            let gotoUrl = "https%3a%2f%2foapi.dingtalk.com%2fconnect%2foauth2%2fsns_authorize%3fappid%3ddingoajirmwomg2bp5fvrb%26response_type%3dcode%26scope%3dsnsapi_login%26state%3dSTATE%26redirect_uri%3dhttp%3a%2f%2fwww.baidu.com";
            // let qrfram = new qrIframe();
            this.src = "https://login.dingtalk.com/login/qrcode.htm?goto=" + gotoUrl+"&r=" + Math.random();
            // qrfram.$mount('#_dingdingQRDiv');

        },
        message(val) {
            if (val.origin.indexOf("login.dingtalk.com") != -1) {
                let loginTmpCode = val.data; //拿到logi
                this.axios.post("dingqr/" + this.propUrl, { loginTmpCode: loginTmpCode }, { timeout: 20000 }).then(res => {
                    this.isShow = false;
                    this.$emit("qrRes", res);
                })
            }
        },
    },
    mounted() {
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', this.message, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', this.message);
        }
    },
    created() {
        this.$bus.on('showDDQRModel', this.showDDQRModel);
    },
    beforeDestroy() {
        //组件销毁前 去掉window的监听，避免重复调用接口
        if (typeof window.addEventListener != 'undefined') {
            window.removeEventListener('message', this.message, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.detachEvent('onmessage', this.message);
        }
        this.$bus.off('showDDQRModel', this.showDDQRModel);
    },
}
</script>